<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量添加点</title>
    <!-- 加载jquery -->
    <script type="text/javascript" src="../../js/jquery-3.1.1.js"></script>
    <!-- 加载百度地图接口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GXCSQBVhF8oZlzjfXCmDB5oLrG7ejbYF"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<button onclick="addPoints()">加载数据</button>
<input id="start" type="text" value="0"/>
<input id="end" type="text" value="1000">
请求响应时间：<input id="getTime" type="text" value="0">
加载数据时间：<input id="reloadTime" type="text" value="0">
<script>
    var counts;

    // 创建一个map对象，指定div
    var map = new BMap.Map("main");
    // 设置地图当前坐标
    map.centerAndZoom(new BMap.Point(87.60052, 43.81248), 6);
    map.enableScrollWheelZoom(true);

    // 画圆
    var opt ={fillColor:"green", strokeWeight: 1.2 ,fillOpacity: 0.2, strokeOpacity: 0.5};
    var mapCircle = new BMap.Circle(new BMap.Point(87.60052, 43.81248),8000,opt);
    mapCircle.addEventListener("click", function(e){
        alert("圆的点击事件");
    });
    map.addOverlay(mapCircle);

    // 创建图标
    var icon = new BMap.Icon("../../images/circle_red_5.png", new BMap.Size(5, 5));

    var markers = new Array();
    $.post(
            "/Echarts2Test/getPointsCount",
            function(data,status){
                counts = data;
            }
    );

    function addPoints(){

        var get_start_time = new Date().getTime();

        var start = $("#start").val();
        var end = $("#end").val();
        $.post(
                "/Echarts2Test/getPoints",
                {
                    start: start,
                    end: end
                },
                function (data, status) {
                    var get_end_time = new Date().getTime();
                    $("#getTime").val(get_end_time-get_start_time);

                    var start_time = new Date().getTime();
                    var points = JSON.parse(data);
                    for(var i=0; i<points.length; i++){
                        markers[i] = new BMap.Marker(new BMap.Point(points[i].lng, points[i].lat),{
                            icon: icon,
                            title: "[" + points[i].lng + ", " + points[i].lng + "]"
                        });
                        map.addOverlay(markers[i]);
                    }
                    // 修改start和end的值
                    $("#start").val($("#end").val());
                    $("#end").val(parseInt($("#end").val()) + 1000);

                    // 计算加载时间
                    var end_time = new Date().getTime();
                    $("#reloadTime").val(end_time-start_time);
                }
        );
    }
</script>

</body>
</html>